import React, { useRef } from 'react'
import ProTable, { ActionType } from '@ant-design/pro-table'
import { HttpQueryRepo, HttpSaveRepo, HttpDeleteRepo } from '@/services'
import { repoColumns } from './config'
import { Button, FormInstance } from 'antd'
import { ModalForm, ProFormDependency, ProFormText } from '@ant-design/pro-form'
import { PlusOutlined } from '@ant-design/icons'

const VersionRepoPage: React.FC<{}> = () => {
    const actionRef = useRef<ActionType>()
    const formRef = useRef<FormInstance>()
    const onDelete = async (repoid: any, row: IT.IVersionRepo) => {
        const { flag, message } = await HttpDeleteRepo({ repoid })
        if (flag !== 1) {
            throw new Error(message)
        }
        return true
    }
    const onSave = async (repoid: any, row: IT.IVersionRepo) => {
        const { flag, message } = await HttpSaveRepo({
            repoid: row.repoid,
            repoName: row.repoName,
            repoPath: row.repoPath,
            repoRepo: row.repoRepo,
        })
        if (flag !== 1) {
            throw new Error(message)
        }
        return true
    }
    const onFinish = async (values: any) => {
        const { flag } = await HttpSaveRepo(values)
        if (flag == 1) {
            actionRef.current?.reload()
            return true
        }
    }
    return (
        <ProTable<IT.IVersionRepo>
            {...{
                columns: repoColumns,
                actionRef,
                rowKey: 'repoid',
                size: 'small',
                bordered: true,
                dateFormatter: 'string',
                headerTitle: '仓库管理',
                search: { labelWidth: 'auto' },
                pagination: { pageSize: 50 },
                request: async (params = {}) => await HttpQueryRepo(params),
                editable: {
                    type: 'multiple',
                    onDelete,
                    onSave,
                },
                toolBarRender: () => [
                    <ModalForm
                        {...{
                            onFinish,
                            modalProps: { centered: true },
                            width: 'auto',
                            formRef,
                            onValuesChange: ({ repoPath }) => {
                                if (typeof repoPath !== 'undefined') {
                                    if (repoPath.includes('.git') && repoPath.includes('/')) {
                                        const repo = repoPath.split('.git')[0].split('/')
                                        formRef.current?.setFieldsValue({ repoRepo: repo[repo.length - 1] })
                                    }
                                }
                            },
                        }}
                        trigger={
                            <Button type='primary'>
                                <PlusOutlined />
                                新增仓库
                            </Button>
                        }>
                        <ProFormText
                            {...{
                                width: 'lg',
                                name: 'repoName',
                                label: '服务名',
                                placeholder: '请输入服务名',
                                rules: [{ required: true, message: '请输入服务名' }],
                            }}
                        />
                        <ProFormText
                            {...{
                                width: 'lg',
                                name: 'repoPath',
                                label: '仓库地址',
                                placeholder: '请输入仓库地址',
                                rules: [
                                    { required: true, message: '请输入仓库地址' },
                                    { pattern: /^(http:\/\/|https:\/\/).+\.git$/, message: '请输入.git结尾的仓库地址' },
                                ],
                            }}
                        />
                        <ProFormText width='lg' name='repoRepo' label='仓库名' readonly />
                    </ModalForm>,
                ],
            }}
        />
    )
}
export default VersionRepoPage
